define(['../../com/base', 'jquery'], function(Base, $) {
    var Drop = Base.extend({
        initializer: function() {
            this.bind();
        },
        bind: function() {
            var self = this;
            var el = self.get('el');
            var input = self.get('input');

            el.on('dragover', function(e) {
                el.css('background-color', '#999');
                e.stopPropagation();
                e.preventDefault();
            });

            el.on('dragleave', function() {
                el.css('background-color', '#eee');
            });

            el.on('dropover', function(e) {
                e.stopPropagation();
                e.preventDefault();
            });

            el.on('drop', function(e) {
                e.stopPropagation();
                e.preventDefault();
                var files = e.originalEvent.dataTransfer.files;
                self.fire('file:dropped', {
                    files: files
                });
                el.css('background-color', '#eee');
            });

            input.on('change', function(e){
                var file = e.target.files;
                self.fire('file:dropped', {
                    files: file
                });
                e.stopPropagation();
                e.preventDefault();
            });
        }
    },
    {
        el: {
            value: '',
            set: function(value) {
                return $(value);
            }
        },
        input: {
            value: '',
            set: function(value) {
                return $(value);
            }
        }
    });

    return Drop;
});

